<template>
  <div class="box" id="box">
    <div class="home-top">
    <van-sticky>
      <!-- 1.搜索栏 -->
      <van-nav-bar>
        <!-- 1.1左侧地址定位 -->
        <span slot="left" @click="areafn()">
          <span style="font-size:.17rem;display:inline-block;">{{area}}</span>
          <van-icon
            name="arrow-down"
            size=".1rem"
            color="#000"
            style="position: relative;left: .05rem;"
          />
        </span>
        <!-- 1.2搜索框 -->
        <van-search background="#ffe7e8" placeholder="请输入关键词搜索" disabled slot="title" @click="$router.push('/search')"/>
      </van-nav-bar>
    </van-sticky>
    <!-- 2.nav导航组件 -->
    <Nav style="margin-top:.15rem;"></Nav>
    </div>
    <!-- 3.四大分类区 -->
    <div class="home-nav">
      <ul>
        <li v-for="(item,index) of homenav" :key="index" @click="$router.push(item.pathname)">
          <h1>{{item.name}}</h1>
          <p>{{item.detail}}</p>
          <img :src="item.pic" alt="" style="width: .25rem;height:.25rem;"/>
        </li>
      </ul>
    </div>
    <!-- 4.推荐组件 -->
    <Recomment></Recomment>
    <!-- 5.心愿单 -->
    <div class="wishlist" @click="goWishList">
      <img src="../../assets/images/xinyuandan.png" alt=""/>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Search, Grid, GridItem, Icon, Sticky, Toast } from 'vant'
import Nav from '@/components/nav.vue'
import Recomment from '@/components/recomment.vue'
import a1 from '../../assets/images/meiqifuli.png'
import a2 from '../../assets/images/yimeibaile.png'
import a3 from '../../assets/images/zhibozhengxing.png'
import a4 from '../../assets/images/chaoliufengshang.png'
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Icon)
Vue.use(Sticky)
Vue.use(Toast)
export default {
  data () {
    return {
      area: '',
      flag: false, // 返回顶部标识符
      // 四大分类区数据
      homenav: [
        { name: '每日福利', detail: '领优惠券', pic: a1, pathname: '/welfare' },
        { name: '医美百科', detail: '医疗知识', pic: a2, pathname: '/medical' },
        { name: '优选视频', detail: '手术过程', pic: a3, pathname: '/live' },
        { name: '潮流风尚', detail: '日韩欧美', pic: a4, pathname: '/fashion' }
      ],
      loginState: localStorage.getItem('loginState_AM')
    }
  },
  components: {
    Nav,
    Recomment
  },
  methods: {
    areafn (area) {
      this.$router.push({ path: '/areaSelect' })
    },
    goWishList () {
      if (this.loginState === 'no' || this.loginState === null) {
        Toast('您还没有登录，快去登录吧')
        setTimeout(() => {
          this.$router.push('/login')
        }, 300)
      } else {
        this.$router.push('/wishList')
      }
    }
  },
  mounted () {
    this.area = localStorage.getItem('areaSelect') ? localStorage.getItem('areaSelect') : '全国'
  }
}
</script>

<style lang="scss" scoped>
.home-top {
  width: 100%;
  background-color: #ffe7e8;
  border-radius: 0 0 25px 25px;
  // overflow: hidden;
  // height: 100%;
}
.van-nav-bar {
  width:100%;
  background: #ffe7e8;
  height: 100%;
  /* margin-top:.05rem; */
}
/deep/.van-nav-bar__title {
  max-width: 100%;
  // width: 2.68rem;
  margin-left:.7rem;
  margin-right: .2rem;
}
/deep/ .van-hairline--bottom::after {
  border:none;
}
/deep/.van-nav-bar .van-icon {
    color: #dbdbdb;
    font-weight: bold;
    font-size: .2rem;
}
/deep/.van-grid {
  margin: 0 0.04rem  0.03rem;
}
/deep/ .van-grid-item__content {
  padding: 0;
  background-color: #ffe7e8;
  border-radius: 0 0 25px 25px;
}
/deep/ .van-search {
  padding: 0.1rem 0 0.1rem 0.12rem;
}
/deep/.van-search .van-cell {
  // padding: 0 .06rem;
  line-height: .28rem;
  padding: 0;
}
/deep/.van-field__control {
  font-size:.15rem;
  /* 搜索框字体颜色无效？？？ */
  color: #dbdbdb;
}
/deep/.van-search__content {
  border-radius: .125rem;
  background: #ffffff;
  // height: .28rem;
  color:#e1e1e1;
  width: 2.78rem;
}
.home-nav {
  margin: .14rem 0;
  ul {
    display: flex;
    justify-content: space-around;
    li {
      width: .75rem;
      height: .6rem;
      float: left;
      border:.01rem solid #f7f6f9;
      box-shadow: 0.01rem 0.01rem 0.02rem #FFE7E8;
      overflow: hidden;
      border-radius: .05rem;
      h1 {
        font-size:.13rem;
        padding: .05rem 0 0 .05rem;
      }
      p {
        // font-size:.12rem;
        padding-left: .05rem;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.75);
      }
      img {
        position: relative;
        top: -0.14rem;
        left: .44rem;
      }
    }
  }
}
.wishlist {
  position: fixed;
  right:.14rem;
  bottom: .71rem;
  img {
    width: .5rem;
    height: .5rem;
  }
}
</style>
